<template>
  <div class="navitem" :class="this.$route.query.preview ? 'position_top' : ''">
    <el-menu
      mode="vertical"
      :default-active="menu[0].id"
      class="el-menu-vertical-demo"
      :collapse-transition="true"
      @open="handleOpen"
      active-text-color="#3377FF"
      @close="handleClose"
    >
      <el-menu-item
        v-for="(item, index) in menu"
        @click="routerMenu(item.path)"
        :index="item.path"
        :class="tabName == item.path ? 'menu_active' : ''"
      >
        <span slot="title">{{ item.name }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabPosition: "left",
      menu: [
        {
          id: "1",
          name: "摘要",
          path: "/detail",
        },
        {
          id: "2",
          name: "权利要求",
          path: "/power",
        },
        {
          id: "3",
          name: "说明书",
          path: "/instructions",
        },
        {
          id: "4",
          name: "附图",
          path: "/drawings",
        },
        {
          id: "5",
          name: "全文",
          path: "/fullText",
        },
        {
          id: "6",
          name: "同族信息",
          path: "/kindred",
        },
        {
          id: "7",
          name: "法律信息",
          path: "/law",
        },
      ],
    };
  },
  computed: {
    tabName() {
      if (Number(this.$route.query.two)) {
        this.menu.map(res => {
          res.path += 'New2'
        })
      }
      return this.$route.path;
    },
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    routerMenu(path) {
      
      this.$router.push({
        path: path,
        query: { 
          preview: this.$route.query.preview ? this.$route.query.preview : 0,
          two: this.$route.query.two ? this.$route.query.two : 0
         },
      });
    },
  },
};
</script>

<style lang="less" >

.navitem {
  width: 260px;
  height: 100%;
  position: fixed;
  top: 100px;
  bottom: 0;
  left: 0;
  background: #fff;
  z-index: 6;
  border-right: 20px solid #f4f5f7;
}
.position_top {
  top: 0 
}
.menu_active {
  border-right: 3px solid #3377ff;
  background-color: #f3f8fe;
}
</style>
